import React from "react";
import styled from "styled-components";
// Components
import BlogBox from "../Elements/BlogBox";
// import FullButton from "../Buttons/FullButton";
// import TestimonialSlider from "../Elements/TestimonialSlider";

export default function Blog() {
  return (
    <Wrapper id="blog">
      <div className="whiteBg">
        <div className="container">
          <HeaderInfo>
            <h1 className="font40 extraBold">历史上的荔枝</h1>
            <p className="font13">
            荔枝作为一种具有悠久历史的水果，不仅在中国享有盛誉，还在世界范围内受到喜爱。荔枝的历史和文化内涵丰富多样，反映了中国人民对美好生活的追求和对自然的敬畏。  </p>
          </HeaderInfo>
          <div className="row textCenter">
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <BlogBox
                title="起源"
                text="中国南部的广东、福建、广西等地。据考古学家的研究，荔枝最早可能起源于中国南方的热带雨林地区。在古代，荔枝主要通过人工栽培的方式种植，后来逐渐传播到其他地区。"
                // tag="company"
                // author="Luke Skywalker, 2 days ago"
                // action={() => alert("clicked")}
              />
            </div>
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <BlogBox
                title="唐朝"
                text="唐朝时期，荔枝成为皇室贡品，被誉为“果中之王”。同时，荔枝的种植技术得到了进一步的发展和传播。"
                // tag="company"
                // author="Luke Skywalker, 2 days ago"
                // action={() => alert("clicked")}
              />
            </div>
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <BlogBox
                title="宋朝"
                text="宋代时期，荔枝的种植技术得到了进一步的发展。宋代著名农学家沈括在其著作《梦溪笔谈》中详细描述了荔枝的种植方法和繁殖技巧。此外，宋代文人苏轼也曾写过许多赞美荔枝的诗篇，如《食荔枝》：“日啖荔枝三百颗，不辞长作岭南人。”"
                // tag="company"
                // author="Luke Skywalker, 2 days ago"
                // action={() => alert("clicked")}
              />
            </div>
          </div>
          <div className="row textCenter">
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <BlogBox
                title="明朝"
                text="明朝时期，荔枝的种植技术得到了进一步的提高，产量也有了显著的增长。同时，荔枝开始被引入东南亚地区。"
                // tag="company"
                // author="Luke Skywalker, 2 days ago"
                // action={() => alert("clicked")}
              />
            </div>
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <BlogBox
                title="清朝"
                text="明清时期，荔枝的种植面积和产量进一步扩大。明代著名医学家李时中在其著作《本草纲目》中对荔枝的药用价值进行了详细的介绍。清代康熙皇帝曾六次南巡，每次都会品尝荔枝。据说康熙皇帝非常喜欢荔枝，甚至曾在一次宴会上一口气吃了100颗荔枝。"
                // tag="company"
                // author="Luke Skywalker, 2 days ago"
                // action={() => alert("clicked")}
              />
            </div>
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <BlogBox
                title="近现代"
                text="近现代以来，随着交通和通讯技术的发展，荔枝的种植范围逐渐扩大到全国各地。如今，中国已成为世界上最大的荔枝生产国和消费国。此外，荔枝还被引种到世界各地，如美国、澳大利亚、东南亚等地区。"
                // tag="company"
                // author="Luke Skywalker, 2 days ago"
                // action={() => alert("clicked")}
              />
            </div>
          </div>
          <div className="row flexCenter">
            <div style={{ margin: "50px 0", width: "200px" }}>
              {/* <FullButton title="Load More" action={() => alert("clicked")} /> */}
            </div>
          </div>
        </div>
      </div>
      {/* <div className="lightBg" style={{padding: '50px 0'}}>
        <div className="container">
          <HeaderInfo>
            <h1 className="font40 extraBold">What They Say?</h1>
            <p className="font13">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
              <br />
              labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
          </HeaderInfo>
          <TestimonialSlider />
        </div>
      </div> */}
    </Wrapper>
  );
}

const Wrapper = styled.section`
  width: 100%;
  padding-top: 20px;
`;
const HeaderInfo = styled.div`
  margin-bottom: 30px;
  @media (max-width: 860px) {
    text-align: center;
  }
`;